<!--
 * Description: FD详情修改组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Jian.Yang
 * Date: 2021/01/04 14:08
-->

<template>
  <div class="fd-detail-edit-pane">
    <div class="custom-top">
      <el-link icon="el-icon-plus" :underline="false" @click="addClick">
        {{ $t('button.add') }}
      </el-link>
    </div>
    <div class="custom-bottom">
      <VirtualTable
        :filterable="true"
        :header-cell-style="$headerCellStyle"
        rowKey="fdRowId"
        :table="shareDataList"
      >
        <!-- rowNo -->
        <Cell fix="left" :label="$t('FdData.rowNo')" :width="50">
          <template slot-scope="scope">
            <span>{{ scope.index + 1 }}</span>
          </template>
        </Cell>
        <!-- rdFunction -->
        <Cell :label="$t('FdData.rdFunction')" prop="rdFunction" sort />
        <!-- category -->
        <Cell :label="$t('FdData.category')" prop="category" sort />
        <!-- itemNo -->
        <Cell :label="$t('FdData.itemNo')" prop="itemNo" sort="number" />
        <!-- rdOwner -->
        <Cell :label="$t('FdData.rdOwner')" prop="rdOwner" sort />
        <!-- trackingOption -->
        <Cell :label="$t('FdData.trackingOption')" prop="trackingOption" sort />
        <!-- optionType -->
        <Cell :label="$t('FdData.optionType')" prop="optionType" />
        <!-- baseProject -->
        <Cell :label="$t('FdData.baseProject')">
          <!-- basePartName -->
          <Cell :label="$t('FdData.basePartName')" prop="basePartName" sort :width="150" />
          <!-- basePartNo -->
          <Cell :label="$t('FdData.basePartNo')" prop="basePartNo" sort :width="150" />
          <!-- basePartName -->
          <Cell :label="$t('FdData.basePartName')" prop="basePartName" sort />
          <!-- basePartNo -->
          <Cell :label="$t('FdData.basePartNo')" prop="basePartNo" sort />
          <!-- baseMaterialGroup -->
          <Cell :label="$t('FdData.MaterialGroup')" prop="baseMaterialGroup" sort />
          <!-- baseMaterialDetail -->
          <Cell :label="$t('FdData.MaterialDetail')" prop="baseMaterialDetail" sort />
          <!-- baseMaterialColor -->
          <Cell :label="$t('FdData.baseMaterialColor')" prop="baseMaterialColor" sort />
          <!-- baseSize -->
          <Cell :label="$t('FdData.baseSize')" prop="baseSize" sort="number" />
          <!-- baseQty -->
          <Cell :label="$t('FdData.baseQty')" prop="baseQty" sort="number" />

          <!-- baseIdProcess -->
          <Cell :label="$t('FdData.baseIdProcess')" prop="baseIdProcess" sort />
          <!-- baseSupplier -->
          <Cell :label="$t('FdData.baseSupplier')" prop="baseSupplier" sort />
          <!-- baseSupplierPn -->
          <Cell :label="$t('FdData.baseSupplierPn')" prop="baseSupplierPn" sort />
          <!-- baseRemark -->
          <Cell :label="$t('FdData.baseRemark')" prop="baseRemark" />
          <!-- baseViewPic -->
          <Cell :label="$t('FdData.baseViewPic')" prop="baseViewPic">
            <template slot-scope="scope">
              <BaseViewBtn @click="fdPicList(scope.row, false)">
                {{ scope.row.basePicture }}
              </BaseViewBtn>
            </template>
          </Cell>

          <!-- baseSapStandardPrice -->
          <Cell
            :label="$t('FdData.baseSapStandardPrice')"
            prop="baseSapStandardPrice"
            sort="number"
          />
          <!-- basePrice -->
          <Cell :label="$t('FdData.basePrice')" prop="basePrice" sort="number" />
          <!-- baseTecCost -->
          <Cell :label="$t('FdData.baseTecCost')" prop="baseTecCost" sort="number" />
        </Cell>
        <!-- newProject -->
        <Cell :label="$t('FdData.newProject')">
          <!-- newPartName -->
          <Cell :label="$t('FdData.newPartName')" prop="newPartName" sort :width="150" />
          <!-- newPartNo -->
          <Cell :label="$t('FdData.newPartNo')" prop="newPartNo" sort :width="150" />
          <!-- newPartName -->
          <Cell :label="$t('FdData.newPartName')" prop="newPartName" sort />
          <!-- commodity -->
          <Cell :label="$t('FdData.commodity')" prop="commodity" sort />
          <!-- newPartNo -->
          <Cell :label="$t('FdData.newPartNo')" prop="newPartNo" sort />
          <!-- newTempPartNo -->
          <Cell :label="$t('FdData.newTempPartNo')" prop="newTempPartNo" sort />
          <!-- newMaterialGroup -->
          <Cell :label="$t('FdData.MaterialGroup')" prop="newMaterialGroup" sort />
          <!-- newMaterialDetail -->
          <Cell :label="$t('FdData.MaterialDetail')" prop="newMaterialDetail" sort />
          <!-- newMaterialColor -->
          <Cell :label="$t('FdData.newMaterialColor')" prop="newMaterialColor" sort />
          <!-- newSize -->
          <Cell :label="$t('FdData.newSize')" prop="newSize" sort="number" />
          <!-- newQty -->
          <Cell :label="$t('FdData.newQty')" prop="newQty" sort="number" />
          <!-- newIdProcess -->
          <Cell :label="$t('FdData.newIdProcess')" prop="newIdProcess" sort />
          <!-- newSupplier -->
          <Cell :label="$t('FdData.newSupplier')" prop="newSupplier" sort />
          <!-- newSupplierPn -->
          <Cell :label="$t('FdData.newSupplierPn')" prop="newSupplierPn" sort />
          <!-- newTooling -->
          <Cell :label="$t('FdData.newTooling')" prop="newTooling" sort />
          <!-- newRemark -->
          <Cell :label="$t('FdData.newRemark')" prop="newRemark" />
          <!-- newViewPic -->
          <Cell :label="$t('FdData.newViewPic')" prop="newPicture">
            <template slot-scope="scope">
              <BaseViewBtn @click="fdPicList(scope.row, true)">
                {{ scope.row.newPicture }}
              </BaseViewBtn>
            </template>
          </Cell>
          <!-- newPrice -->
          <Cell :label="$t('FdData.newPrice')" prop="newPrice" sort="number" />
          <!-- newTecCost -->
          <Cell :label="$t('FdData.newTecCost')" prop="newTecCost" sort="number" />

          <!-- newSapStandardPrice -->
          <Cell
            :label="$t('FdData.newSapStandardPrice')"
            prop="newSapStandardPrice"
            sort="number"
          />
        </Cell>
        <!-- statusCompare -->
        <Cell :label="$t('FdData.statusCompare')" prop="statusCompare" sort />
        <!-- gapType -->
        <Cell :label="$t('FdData.gapType')" prop="gapType" sort />
        <!-- gapReason -->
        <Cell :label="$t('FdData.gapReason')" prop="gapReason" />
        <!-- gcm -->
        <Cell :label="$t('FdData.gcm')">
          <!-- gcmFunction -->
          <Cell :label="$t('FdData.gcmFunction')" prop="gcmFunction" sort />
          <Cell :label="$t('FdData.gcmOwner')" sort>
            <template slot-scope="scope">
              {{ gcmOwnerById(scope.row.gcmOwner) }}
            </template>
          </Cell>
          <!-- isGcmCost -->
          <Cell :label="'GCM' + $t('FdData.costState')">
            <template slot-scope="scope">
              <span v-if="scope.row.isGcmCost">{{ $t('FdData.hasCost') }}</span>
              <span v-else>{{ $t('FdData.unCost') }}</span>
            </template>
          </Cell>
          <!-- gcmCost -->
          <!-- <Cell
            v-if="cellIsShow.IsGcmCost"
            :label="$t('FdData.gcmCost')"
            prop="gcmCost"
            sort="number"
          /> -->
          <!-- gcmCostDelta -->
          <Cell :label="$t('FdData.gcmTotalCostDelta')" prop="gcmTotalCostDelta" sort="number" />
          <!-- gcmCostRemark -->
          <Cell :label="$t('FdData.gcmCostRemark')" prop="gcmCostRemark" />
        </Cell>
        <!-- pbmTotalCostDelta -->
        <Cell :label="$t('FdData.pbmTotalCostDelta')" prop="pbmTotalCostDelta" sort="number" />
        <!-- pbmCommitTotalCostDelta -->
        <Cell
          :label="$t('FdData.pbmCommitTotalCostDelta')"
          prop="pbmCommitTotalCostDelta"
          sort="number"
        />
        <!-- aucDelta -->
        <!-- <Cell :label="$t('FdData.aucDelta')" prop="aucDelta" sort="number" /> -->
        <!-- pirDelta -->
        <!-- <Cell :label="$t('FdData.pirDelta')" prop="pirDelta" sort="number" /> -->
        <!-- tecDelta -->
        <!-- <Cell :label="$t('FdData.tecDelta')" prop="tecDelta" sort="number" /> -->
        <!-- operate -->
        <Cell fix="right" :label="$t('FdData.operate')" :width="140">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-link :underline="false" @click="rowEdit(scope.row)">
              {{ $t('button.edit') }}
            </el-link>
            <!-- 删除 -->
            <el-link style="margin-left:12px" :underline="false" @click="rowDelete(scope.row)">
              {{ $t('button.delete') }}
            </el-link>
          </template>
        </Cell>
      </VirtualTable>
    </div>

    <!--新增对话框-->
    <BaseDialog
      v-if="addDialogVisible"
      :title="$t('button.add')"
      :visible.sync="addDialogVisible"
      width="1200px"
    >
      <ServerDetailEditAdd
        :input-data="inputData"
        :row-no="lastRowNo"
        @cancel="addDialogVisible = false"
        @save="afterAddSave"
      />
    </BaseDialog>

    <!--编辑对话框-->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('button.edit')"
      :visible.sync="editDialogVisible"
      width="1200px"
    >
      <ServerDetailEditEdit
        :fd-base-data="inputData"
        :input-data="currentEditRow"
        @cancel="editDialogVisible = false"
        @save="afterEditSave"
      />
    </BaseDialog>

    <!--图片对话框-->
    <BaseDialog
      v-if="picDialogVisible"
      :title="$t('FdData.viewPic')"
      :visible.sync="picDialogVisible"
      width="500px"
    >
      <BaseIdpPicView
        :idp-token="idpToken"
        :pic-list="picList"
        @cancel="picDialogVisible = false"
      />
    </BaseDialog>
  </div>
</template>
<script>
import ServerDetailEditAdd from './ServerDetailEditAdd'
import ServerDetailEditEdit from './ServerDetailEditEdit'
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
import { fdRowDeletePart } from '@/api/serverbom/fd-row'
import { idpGetToken } from '@/api/quote/idp'
import { fdRowPictureList } from '@/api/quote/fd-row-picture'

export default {
  name: 'ServerDetailEditPane',
  components: { ServerDetailEditAdd, ServerDetailEditEdit, Cell, VirtualTable },
  props: {
    inputData: {
      default: () => null,
      type: Object
    },
    shareDataList: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      // fd 数据最后一行 roeNo + 1
      lastRowNo: -1,
      // 新增对话框可见标识
      addDialogVisible: false,
      // 编辑对话框可见标识
      editDialogVisible: false,
      // 当前修改行
      currentEditRow: {},
      // idp token
      idpToken: '',
      // 每一行的图片数据
      picList: [],
      // 图片对话框可见标识
      picDialogVisible: false
    }
  },
  computed: {
    gcmOwnerById() {
      return gcmOwner => {
        if (gcmOwner && gcmOwner.length) {
          const newVal = []
          for (const val of gcmOwner) {
            newVal.push(this.$store.getters['user/getUserNameById'](val))
          }
          return newVal.join('|')
        } else {
          return ''
        }
      }
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      this.getIdpGetToken()
    },
    async getIdpGetToken() {
      try {
        const idpTokenRes = await idpGetToken({})
        this.idpToken = idpTokenRes.data.accessToken
      } catch (error) {
        console.log(error)
      }
    },

    addClick() {
      this.addDialogVisible = true
      if (this.shareDataList.length > 0) {
        this.lastRowNo = Number(this.shareDataList.slice(-1)[0].rowNo) + 1
      } else {
        this.lastRowNo = 0
      }
    },

    /* 行记录编辑*/
    rowEdit(row) {
      this.currentEditRow = this.$deepCopy(row)
      this.editDialogVisible = true
    },
    // 行删除
    async rowDelete(row) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        await fdRowDeletePart({ fdRowId: row.fdRowId }, { msgSuccess: true, msgError: true })
        this.$emit('update')
      } catch (error) {
        console.log(error)
      }
    },
    afterAddSave(data) {
      this.$emit('update')
      this.addDialogVisible = false
    },
    afterEditSave(data) {
      this.$emit('update')
      this.editDialogVisible = false
    },

    // 查看fd每一行图片列表
    async fdPicList(data, isNew) {
      const res = await fdRowPictureList({ fdRowId: data.fdRowId, isNew: isNew })
      this.picList = res.data
      this.picDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.fd-detail-edit-pane {
  .custom-top {
    height: 60px;
    padding-top: 10px;
  }
  .custom-bottom {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 20px;
    right: 25px;
  }
}
</style>
